<template>
  <div>
    <div class="tabBox-wrap">
      <!-- {{barData2}} -->
      <div class="content-wrap">
        <div class="article-title">
          <p>专项下达率-分单位</p>
          <span></span>
        </div>
        <el-select size="mini" v-model="tValue" @change="handle_hundred">
          <el-option v-for="(it, i) in typeSelect" :key="i" :label="it.specialName" :value="it.id"></el-option>
        </el-select>
        <div id="barLine">
          <BarLine :barData="barData1" :id="'tabs2'" v-loading="showTableLoading1"></BarLine>
        </div>
        <div class="article-title">
          <p>专项下达率-分单位</p>
          <span>单位：万元</span>
        </div>
        <div class="tableBox">
          <el-table :data="tableData" stripe size="mini" class="tableTh28" v-loading="showTableLoading1" maxHeight="350">
            <el-table-column prop="title" label="类型" width="180"></el-table-column>
            <el-table-column v-for="(item,index) in selectoptions" :key="index" :label="item.label" :prop="item.prop" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="tabBox-wrap">
      <div class="content-wrap">
        <div class="article-title">
          <p>专项下达率-分专项</p>
          <span></span>
        </div>
        <el-select v-model="selectvalue" placeholder="请选择" size="mini" @change="changSelect">
          <el-option label="浙江" value="1"></el-option>
          <el-option v-for="(item,index) in selectoptions" :key="index" :label="item.label" :value="item.prop"></el-option>
        </el-select>
        <div id="barLine">
          <BarLine :barData="barData2" :id="'tabs2'" v-loading="showTableLoading2"></BarLine>
        </div>
        <div class="article-title clear">
          <div></div>
          <span>单位：万元</span>
        </div>
        <div class="tableBox">
          <el-table :data="tableData2" stripe size="mini" class="tableTh28" v-loading="showTableLoading2" maxHeight="350">
            <el-table-column prop="title" label="类型" width="180"></el-table-column>
            <el-table-column v-for="(item,index) in column2" :key="index" :label="item.specialName" :prop="item.specialName" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BarLine from "./barLine1";
import { $budgetAPI } from "@/api/";
import { getSessionStorage } from "@/common/js/storage";
export default {
  components: {
    BarLine,
  },

  data() {
    return {
      selectoptions: [],
      selectvalue: undefined,
      showTableLoading1: true,
      showTableLoading2: true,

      tableData: [],
      barData1: undefined,
      barData2: undefined,
      column2: [],
      tableData2: [],
      areaId: JSON.parse(getSessionStorage("accountInfo")).areaId,
      typeSelect: [],
      tValue: "",
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.selectvalue = this.areaId;
      this.typeSelect = await this.getTypeSelect();
      this.getKanBanSpecialReleaseArea();
      this.getKanBanSpecialReleaseAreaCompany(this.areaId);
    },
    getTypeSelect() {
      return new Promise((resolve, reject) => {
        $budgetAPI.getIDList(
          {
            acctYear: new Date().getFullYear(), // 暂时取系统时间
            isDesk: "1",
          },
          (res) => {
            if (res && res.code == 0) {
              resolve([{ id: "", specialName: "全部" }].concat(res.content));
            } else {
              reject([]);
            }
          }
        );
      });
    },
    async getKanBanSpecialReleaseAreaCompany(areaId) {
      try {
        this.showTableLoading2 = true;
        let res = await this.fetch(
          $budgetAPI.getKanBanSpecialReleaseAreaCompany,
          {
            areaId,
          }
        );
        this.column2 = res.specialList;
        let clist1 = { title: "画饼" };
        let clist2 = { title: "下达" };
        let clist3 = { title: "下达率" };
        for (let index in res.drawSpecialDataList) {
          clist1[res.drawSpecialDataList[index]["indexName"]] =
            res.drawSpecialDataList[index]["indexValue"];
          clist2[res.releaseSpecialDataList[index]["indexName"]] =
            res.releaseSpecialDataList[index]["indexValue"];
          clist3[res.specialRate[index]["indexName"]] =
            res.specialRate[index]["indexValue"] !== null &&
            res.specialRate[index]["indexValue"] + "%";
        }
        this.tableData2 = [clist1, clist2, clist3];

        let barData2 = {};
        barData2.xdata = res.specialList.map((i) => i.specialName);
        barData2.barData1 = res.drawSpecialDataList.map(
          (i) => (i.indexValue && i.indexValue) || 0
        );
        barData2.barData2 = res.releaseSpecialDataList.map(
          (i) => (i.indexValue && i.indexValue) || 0
        );
        barData2.lineData = res.specialRate.map(
          (i) => (i.indexValue && i.indexValue) || 0
        );

        this.barData2 = barData2;
      } catch (error) {
        console.log(error);
      } finally {
        this.showTableLoading2 = false;
      }
    },
    async getKanBanSpecialReleaseArea() {
      try {
        this.showTableLoading1 = true;
        let res = await this.fetch($budgetAPI.getKanBanSpecialReleaseArea, {
          indexCode: this.tValue,
        });
        this.selectoptions = res.areaIds.map((item, index) => {
          return {
            label: res.areaNames[index],
            prop: item,
          };
        });

        let list1 = { title: "画饼" };
        let list2 = { title: "下达" };
        let list3 = { title: "下达率" };
        for (let index in res.drawAreaDataList) {
          list1[res.drawAreaDataList[index]["indexCode"]] =
            res.drawAreaDataList[index]["indexValue"];
          list2[res.releaseAreaDataList[index]["indexCode"]] =
            res.releaseAreaDataList[index]["indexValue"];
          list3[res.areaRateList[index]["indexCode"]] =
            res.areaRateList[index]["indexValue"] + "%";
        }
        this.tableData = [list1, list2, list3];

        let barData1 = {};
        barData1.xdata = res.areaNames;
        barData1.barData1 = res.drawAreaDataList
          .map((i) => i.indexValue)
          .slice(0, 11);
        barData1.barData2 = res.releaseAreaDataList.map((i) => i.indexValue);
        barData1.lineData = res.areaRateList.map((i) => i.indexValue);

        this.barData1 = barData1;
      } catch (error) {
        console.log(error);
      } finally {
        this.showTableLoading1 = false;
      }
    },

    changSelect(v) {
      this.selectvalue = v;
      this.getKanBanSpecialReleaseAreaCompany(v);
    },
    handle_hundred(val) {
      this.tValue = val;
      this.getKanBanSpecialReleaseArea();
    },
    fetch(action, params) {
      return new Promise((resolve, reject) => {
        action(
          { ...params },
          (res) => {
            if (res.code === 0) {
              resolve(res.content);
            } else {
              reject({});
            }
          },
          (err) => {}
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tabBox-wrap {
  padding: 10px 0 15px;
  width: inherit;
  //   height: 500px;
  //   background: pink;

  .content-wrap {
    width: 100%;
    // height: 500px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 15px 30px -10px rgba(0, 0, 0, 0.1);
    padding: 10px 20px 20px 20px;
    box-sizing: border-box;
  }
}

.article-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  position: relative;
  span {
    color: rgba(0, 0, 0, 0.4);
  }
  &::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    height: calc(100% - 15px);
    width: 5px;
    transform: translate(0, -50%);
    background-color: #0086ff;
  }
}
.clear {
  &::before {
    content: none;
  }
}
#barLine {
  height: 400px;
  //   width: 100%;
  //   background: red;
}
</style>